<template>
	<!-- 本周热门排行 -->
	<div>
		<div class="hotTit">
			<div class="left">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
				<span>{{hot}}</span>
			</div>
			<div class="right">
				<span>{{hot2}}</span>
			</div>
		</div>
		<div class="detailsTT">
			<div class="details" v-for="(item,index) in detail" :key="item.id">
				<img :src="item.img" alt="">
				<div class="topimg">
					<img :src="item.topimg" alt="">
				</div>
				
				<span>{{item.name}}</span>
				<div>
					<span class="de_text">{{item.price}}</span>
					<span>{{item.price2}}</span>
				</div>
				
			</div>
			
				
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hot:"本周热门榜单",
				hot2:"全部榜单>",
				detail:[
					{
						id:"01",
						topimg:"http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png",
						img:"http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
						name:"故宫",
						price:"￥20",
						price2:"起"
					},
					{
						id:"02",
						topimg:"http://img1.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png",
						img:"http://img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_250x250_f35a11db.jpg",
						name:"渔阳滑雪场",
						price:"￥38",
						price2:"起"
					},
					{
						id:"03",
						topimg:"http://img1.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png",
						img:"http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
						name:"南山滑雪场",
						price:"￥120",
						price2:"起"
					},
					{
						id:"04",
						topimg:"",
						img:"http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",
						name:"八达岭长城",
						price:"￥157.5",
						price2:"起"
					},
					{
						id:"05",
						topimg:"",
						img:"http://img1.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg",
						name:"圆明园",
						price:"￥25",
						price2:"起"
					},
					{
						id:"06",
						topimg:"",
						img:"http://img1.qunarzz.com/sight/p0/1711/66/661d6a43e3e4dceda3.water.jpg_250x250_2e8081db.jpg",
						name:"军都山滑雪场",
						price:"￥125",
						price2:"起"
					},
					
				]
			};
		}
	}
</script>

<style scoped>
	.hotTit{
		width: 100%;
		margin-top: .1rem;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: .2rem .1rem;
	}
	.left img{
		width: .15rem;
		height:.15rem;
	}
	.left span{
		font-size: .16rem;
	}
	.right span{
		font-size: .12rem;
		color: #616161;
	}
	/* 详情 */
	.detailsTT{
		width: 100%;
		display: flex;
		background: white;
		flex-wrap:nowrap ;
		justify-content: flex-start;
		align-items: center;
		overflow-x: scroll;
	}
	.details{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: .1rem;
		box-sizing: border-box;
		font-size: .12rem;
	}
	.details img{
		width: 1rem;
		height: 1rem;
	}
	.topimg img{
		width: .42rem;
		height:.2rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	.de_text{
		color:#ff8300;
		line-height: .20rem;
	}
</style>
